<template>
  <div class="my-index-container">
    <PullRefresh v-model="loading" @refresh="onRefresh" class="van-pull-refresh-container">
      <header>依浓集市</header>
      <section class="header-container">
        <img :src="memberData.HeadImage" alt="">
        <div class="content">
          <p class="name">{{memberData.NickName}}</p>
          <p class="time" v-if="!memberData.IsMember">您还不是会员</p>
          <p class="time" v-else>会员到期时间：{{memberData.MemberDate.substring(0, 10)}}</p>
        </div>
      </section>
      <section class="cell-list">
        <CellGroup>
          <Cell title="收货地址" is-link to="/my/address" />
          <Cell title="红包管理" is-link to="/my/red" />
          <Cell title="推荐会员二维码" is-link v-show="memberData.IsShowRecomCode" @click="showRecomImage"  />
        </CellGroup>
      </section>
      <section class="bottom-btns">
        <Button
          type="primary"
          class="btn member"
          @click="openMember"
        >{{memberData.IsMember ? '续费会员' : '开通会员'}}</Button>
        <p class="member-text">会员每天可享受一次全场满减</p>
      </section>
    </PullRefresh>
      <Popup v-model="isShowRecomImage">
        <div class="recom-image">
          <img :src="memberData.QRImage" alt="">
          <p>邀请好友扫一扫开通会员</p>
        </div>
      </Popup>
  </div>
</template>
<script>
import { Cell, CellGroup, Button, Actionsheet, PullRefresh, Toast, Popup } from 'vant';
import { clearToken, clearKey } from '../../utils/auth';
export default {
  components: {
    Cell,
    CellGroup,
    Button,
    Actionsheet,
    PullRefresh,
    Popup
  },
  data() {
    return {
      loading: false,
      memberLoading: false,
      memberData: {},
      isShowRecomImage: false
    }
  },
  methods: {
    onSelect(item) {
      this.buyMember(item.type);
      this.isShowMember = false;
    },
    onRefresh() {
      this.getData();
    },
    getData() {
      this.loading = true;
      this.$http.my.index().then(({ result }) => {
        this.memberData = result;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      })
    },
    openMember() {
      this.$router.push(`/my/member/0`);
    },
    showRecomImage() {
      console.log('show');
      
      this.isShowRecomImage = true;
    },
    // logout() {
    //   clearToken();
    //   clearKey();
    //   window.location.href = window.location.origin + window.location.pathname + window.location.hash;
    // },
  },
  activated() {
    this.getData()
  }
}
</script>
<style lang="less" scoped>
.my-index-container{
  .van-pull-refresh-container{
    height: calc(100vh - 46px);
  }
  header{
    height: 46PX;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17PX;
    background-color: @maincolor;
    color: #fff;
  }
  .header-container{
    background-color: @maincolor;
    padding: 20px;
    display: flex;
    align-items: center;
    img{
      width: 120px;
      height: 120px;
      border-radius: 50%;
      margin: 20px;
    }
    .content{
      color: #fff;
      .name{
        margin-bottom: 10px;
      }
    }
  }
  .cell-list{
    padding: 20px;
  }
  .recom-image{
    text-align: center;
    padding-bottom: 15px;
    img{
      width: 366px;
      height: 366px;
    }
  }
  .bottom-btns{
    margin-top: 550px;
    .btn{
      display: block;
      margin: 30px auto 0;
      width: 90%;
      &.member{
        background-color: @maincolor;
      }
    }
    .member-text{
      text-align: center;
      font-size: 24px;
      color: #6f3f15;
      margin-top: 20px;
    }
  }
}
</style>
